<template>
  <div>
    <div class="search-lists clearfix">
      <component
        class="search-lists-item"
        v-for="(item,index) in lists"
        :key="index"
        :is="item.component"
        :desc="item"
        @output="callbackFn($event)"
      ></component>
    </div>
    <div class="search-show">
      <el-row>
        <span class="round primary" v-for="(item ,index) in getCase" :key="item.key">
          {{item.key+':' +item.value}}
          <a
            href="javascript:;"
            title="删除"
            class="close-btn"
            @click="removeItem(index)"
          >x</a>
        </span>
      </el-row>
    </div>

    <div class="search-list">
      <ul>
        <li>
          <h5>姓名：张三</h5>
          <div>
            <span>浙江省杭州市jdjdj</span><span>浙江省杭州市jdjdj</span><span>浙江省杭州市jdjdj</span><span>浙江省杭州市jdjdj</span><span>浙江省杭州市jdjdj</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
const lists = [
  {
    component: 'popRange',
    title: '报警时间',
    visible: false,
    data: ''
  },
   {
    component: 'dropdown',
    title: '案件性质',
    items:['黄金糕','黄金糕2','黄金糕3'],
    visible: false,
    data: ''
  },
  {
    component: 'popInput',
    title: '描述',
    visible: false,
    data: '',
    placeholder: '输入的描述信息'
  }, 
];
export default {
  name: 'tabsCase',
  data() {
    return {
    };
  },
  props:['lists'],
  computed: {
    ...mapGetters('Statistics', ['getCase'])
  },
  methods: {
    ...mapActions('Statistics', ['setItem','removeItem']),
    callbackFn(event) {
      // console.log(event);
      this.setItem(event,'case');
      console.log('opo');
      console.log(this.getCase);
    }

  }
};
</script>
<style lang="scss" scoped>
.mr15 {
  margin-left: 15px;
}
.search-lists {
  .search-lists-item {
    float: left;
    margin-left: 10px;
  }
}
.search-show {
    margin-top: 20px;
    padding: 5px;
    background: #fff;
    border: 1px solid #333;
    min-height: 40px;
    .round {
      border: 1px solid #409eff;
      border-radius: 5px;
      padding: 0 4px;
      font-size: 12px;
      margin-right: 8px;
    }
    .primary {
      color: #fff;
      background: #409eff;
    }
    .close-btn {
      color: red;
      display: inline-block;
      height: 6px;
      width: 6px;
      border-radius: 50%;
      background: red;
    }
  }
</style>
